<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/main.css?ver=${main_css_version}" rel="stylesheet" type="text/css" />
<title>${projectTitle }</title>
<style type="text/css">
  table,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-family: inherit;
      font-size: 100%;
      vertical-align: baseline;
  }
  table {
      width: 100%;
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-collapse: separate;
      border-spacing: 0;
      vertical-align: middle;
  }
  th,
  td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
  }
  table th {
      font-weight: bold;
      background: #eee;
  }
  table th,
  table td {
      padding: 5px 15px;
  }
  .text-center {
    text-align:center;
  }
</style>
</head>
<body>
 <header id="main-top">
    <a id="a_back_btn" href="javascript:history.back(-1);">
      <div id="main-top-left">
        <img src="${ctx}/images/mui_title_back_btn.png" class="img-2">
      </div>
    </a>
    <div id="main-top-title">FAQ - ${categoryName}</div>
  </header>
  <div id="container">
    <div id="FAQ-1">
    <c:forEach var="faqDetail" items="${faqItemList}" varStatus="status">
      <dl class="FAQ-list">
       <c:if test="${not empty faqDetail.question}">
        <c:if test="${faqDetail.question != '@body'}">
        <dt>
          <span style="color: #FF4500;">Q.</span>
          ${faqDetail.question}
        </dt>
        <dd>
          <span style="color: #0080DC;">A.</span>
          ${faqDetail.answer}
        </dd>
        </c:if>
       </c:if>
       <c:if test="${faqDetail.question == '@body'}">
        <dd>
          ${faqDetail.answer}
        </dd>
       </c:if>
       <c:if test="${empty faqDetail.question}">
        <dd>
          <span style="color: #0080DC;">${status.index + 1 }.</span>
          ${faqDetail.answer}
        </dd>
       </c:if>
      </dl>
     </c:forEach>
    </div>
  </div>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <script type="text/javascript">
    var origin = "${origin}";
    $(function(){
    	if (origin == "orderConfirmPage") {
    		$("#a_back_btn").on("click", function(e){
    			e.preventDefault();
    			window.history.back();
    		});
    	}
    });
  </script>
</body>
</html>